<template>
	<coreshop-page title="拼团" titleColor="#fff" bgColor="rgba(0,0,0,0)" mode="left" :isShowStatusBarHeight="false"
		needLoadingPage :loadingPage="loading">
		<view class="layout-pintuan-box" v-if="state.list.length > 0">
			<view class="bg-box"></view>
			<view class="content-box">
				<view class="title-box">
					<view>爆款推荐</view>
					<view class="icon">
						<uv-icon name="checkmark-circle-fill" color="#fff" size="17"></uv-icon>
						省钱省心限时拼
					</view>
				</view>

				<view class="item-box" v-for="item, index in state.list" :key="index">
					<view class="ranking" v-if="index < 3">TOP{{ index + 1 }}</view>
					<coreshop-goods-card type="horizontal" imgHeight="200rpx" imgWidth="200rpx"
						:goodsData="hanldeCombinationGoodsData(item)">
						<template #goodPrice>
							<view class="goods-box">
								<view class="tag-box">
									<view class="tag count">已拼{{item.buyPinTuanCount}}单</view>
									<view class="tag nums">已售{{item.pinTuanRecordNums}}{{item.goodUnit}}</view>
									<view class="tag people">{{item.peopleNumber}}人团</view>
								</view>
								<view class="goods-parice">
									<view class="price-box">
										<text class="price">￥{{ item.pinTuanPrice <= 0 ? 0 : item.pinTuanPrice}}</text>
										<text class="line-price">￥{{ item.mktPrice }}</text>
									</view>
									<view class="btn"
										@click="handleRouteNavigateTo(`/pages/subpackage/activity/pinTuan/detail/detail?id=${item.id}`)">
										马上拼</view>
								</view>
							</view>
						</template>
					</coreshop-goods-card>
				</view>
				<view class="no-data" v-if="state.noData">没有更多了</view>

			</view>
		</view>
		<view v-else class="layout-empty-box">
			<coreshop-empty :mode="EmptyEnum.data" text="暂无拼团商品"></coreshop-empty>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted, ref } from 'vue';
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { queryPinTuanList } from '@/core/api';
	import type { Response, PinTuanListType } from '@/core/models';
	import { EmptyEnum } from '@/core/enum';
	import { handleRouteNavigateTo } from '@/core/utils';
	import { useLoadingFn } from '@/core/hooks';

	const state = reactive<{
		list : Array<PinTuanListType>;
		page : number;
		limit : number;
		noData : boolean;
	}>({
		list: [],
		page: 1,
		limit: 10,
		noData: false,
	})

	const loading = ref(true);
	const handleQuerytPinTuanList = useLoadingFn(getPinTuanList, loading);

	onMounted(() => {
		/** 获取拼团列表 */
		handleQuerytPinTuanList()
	});

	onPullDownRefresh(async () => {
		state.list = [];
		await handleQuerytPinTuanList();
		uni.stopPullDownRefresh();
	});

	/** 获取拼团列表 */
	async function getPinTuanList() {
		const pinTuanList : Response<Array<PinTuanListType>> = await queryPinTuanList({
			page: state.page,
			limit: state.limit,
		});
		if (state.limit > pinTuanList.data?.length || pinTuanList.data?.length == 0) {
			state.noData = true;
		}
		if (pinTuanList.data?.length > 0) {
			state.list = state.list.concat(pinTuanList.data);
		}
	}

	/** 组合商品数据传入组件 */
	const hanldeCombinationGoodsData = (item : any) => {
		return {
			id: item.id,
			image: item.goodThumbnail,
			name: item.name,
			brief: item.goodName,
		}
	}

	onReachBottom(() => {
		if (!state.noData) {
			state.page++;
			getPinTuanList();
		}
	});
</script>
<style lang="scss" scoped>
	@import './list.scss';
</style>